<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <!--    <script src="js/jquery-1.12.4.min.js"></script>-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--    <script src="js/jquery.cookie.js"></script>-->
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/notifications/Lobibox.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
        }

        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }

        .search-box {
            height: 48px;
        }

        .input-group-addon {
            background-color: #E94F4C;
            border: none;
            color: #ffffff;
        }

        .control-icon {
            position: absolute;
            top: 50%;
        }

        .mgt38 {
            margin-top: 30px;
        }

        .thumbnail a img {
            height: 200px;
            width: 200px;
        }

        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }

        a:hover {
            text-decoration: none;
        }

        h3, p {
            text-align: center;
        }


        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right login-text">
            <a   href="login.jsp">登录</a>
        </p>
        <p class="navbar-text navbar-right">
            <a href="register.jsp">注册</a>
        </p>
    </div>
</nav>
<div class="container" id="app">
    <div class="row">
        <div class="col-xs-1 search-box">
            <a href="#" class="logo">
                <i class="fa fa-sign-language"></i>
            </a>
        </div>
        <div class="col-xs-9 search-box">
            <div class="input-group search-box">
                <input class="form-control search-box">
                <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
            </div>
        </div>
        <div class="col-xs-2 search-box" id="shopCar">
            <a href="shoppingCart.jsp" class="btn btn-danger btn-block search-box">
                <i class="fa fa-cart-arrow-down" style="font-size: 20px;"></i>&nbsp;&nbsp;购物车
                <!-- 购物车数据的数量 -->
                <span id="shoppingCartNum" class="badge">{{shopCarNum}}</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div id="carousel-example" class="carousel slide mgt38" data-ride="carousel">
            <!-- 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
                <li data-target="#carousel-example" data-slide-to="4"></li>
            </ol>

            <!-- 放置图片 -->
            <div class="carousel-inner">

                <!-- 展示每张图片以及文字 -->
                <div class="item active">
                    <img src="images/banner1.webp">
                </div>
                <div class="item">
                    <img src="images/banner2.webp">
                </div>
                <div class="item">
                    <img src="images/banner3.webp">
                </div>
                <div class="item">
                    <img src="images/banner4.jpg">
                </div>
            </div>

            <!-- 左边的箭头 -->
            <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                <span class="fa fa-chevron-left control-icon"></span>
                <span class="sr-only">Previous</span>
            </a>
            <!-- 右边的箭头 -->
            <a class="right carousel-control" href="#carousel-example" data-slide="next">
                <span class="fa fa-chevron-right control-icon"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="row mgt38" id="goodsListInfo">
        <div class="col-xs-3" v-for="g in goodList">
            <div class="thumbnail">
                <a href="javascript: void(0);">
                    <img :src="g.img">
                    <div class="caption">
                        <p class="description">
                            {{g.title}}
                        </p>
                        <p>
                            价格：￥{{g.price}}
                        </p>
                        <p>
                            <button onclick="addToShoppingCart(this)" :goodID=g.goodsID class="btn btn-danger">加入购物车

                            </button>
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
<%--        <%@include file="syncCartAndNameDisplay.jsp"%>--%>
    //userId  userName
    //     $.cookie("username",'ssx');
    //     $.cookie('uId',28);



    var showLogin = $('#loginText');
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: [],
            shopCarNum: 0,
            loginStatus: 1
        }
    });
    $(function () {
        if ($.cookie('username')) {
            showLogin.html('欢迎你:' + $.cookie('username'));
            showLogin.prop('href', 'javascript: void(0);');
        }
        getLocalStorageSum();
    });


    //取得数据库中商品信息
    $.ajax({
        url: '${pageContext.servletContext.contextPath}/good/showGood',
        type: 'get',
        dataType: 'json',
        success: function (_data) {
            console.log("_data:"+_data)
            if (_data.code > 0) {
                var subjects = _data.data;
                for (var i = 0; i < subjects.length; i++) {
                    var good = subjects[i];
                    var img = good.smallPic;
                    var goodsID = good.goodsId + '';
                    var title = good.title;
                    var price = good.price;
                    vm.goodList.push({
                        img: 'http://localhost/' + img,
                        title: title,
                        price: price,
                        goodsID: goodsID
                    })
                }
            }

        }
    });


    // 显示错误提示信息
    // $.cookie('login', 'ming');

    //数据添加到数据库表中
    function addToShoppingCart(btnTag) {

        //登陆状态下
        if ($.cookie('username')) {
            var goodID = $(btnTag).attr('goodID');

            console.log("index - 257-goodID:"+goodID)
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/shoppingCart/add/' + goodID + '/' + $.cookie('uId'),
                type: 'PUT',
                dataType: 'json',
                success: function (_data) {

                    if (_data.code > 0) {
                        addShoppingCartByStorage(btnTag);
                    } else {
                        showErrorBox(_data.msg)
                    }
                }
            });

        } else {

            addShoppingCartByStorage(btnTag);
        }

    }

    function showErrorBox(msgText) {

        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频

        })
    }

    //添加商品到购物车（通过local Storage）
    function addShoppingCartByStorage(btnTag) {

        console.log("index -290 btnTag  "+btnTag)
        //取得当前商品good_id
        var goodID = $(btnTag).attr('goodID');

        console.log("goodID___+"+goodID)

        var shoppingCart = localStorage.getItem('local_shopping_cart');

        var goodID = '' + goodID;
        //第一次添加商品
        if (!shoppingCart) {
            shoppingCart = {};
        console.log("第一次添加商品");
            shoppingCart[goodID] = 1;
            debugger;

            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart));
        }
        //不是第一次添加商品
        else {
            var shoppingCart = JSON.parse(localStorage.getItem('local_shopping_cart'));
            //获得localStorage中存储的商品id列表
            var goodsID = Object.keys(shoppingCart);
            console.log("--------goodsID---------");
            console.log(goodsID);
            //判断是否已经存在，存在就+1，不存在就创建存储
            if (goodsID.indexOf(goodID) != -1) {
                shoppingCart[goodID]++;
            } else {
                shoppingCart[goodID] = 1;
            }

            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart))

        }

        getLocalStorageSum();
    }

    //计算localStorage中的商品总数
    function getLocalStorageSum() {

        var shoppingCart = localStorage.getItem('local_shopping_cart');
        console.log("index - 331 shoppingCart"+shoppingCart)
        var shoppingCart = JSON.parse(shoppingCart);

        var shopCarSum = 0;

        var goodsID = Object.keys(shoppingCart);

        for (var i = 0; i < goodsID.length; i++) {

            var goodNum = shoppingCart[goodsID[i]];

            shopCarSum += goodNum;
        }

        vm.shopCarNum = shopCarSum;
    }


</script>

